<template>
  <View class="container">
    <login v-if="!isLogined && isShow" v-on:x="noLogin" v-on:plogin="toLogin" sourcePage="tcm" :source="source"
           :invitorCode="invitorCode"></login>
    <navigation-bar @onBack="onBack()" :navigationStyle="{ background: 'none', position: 'fixed' }"
                    title="中医体质测试"/>
    <image class="page-bg" mode="widthFix" :src="`${imgBasePath}tcm/physiqueTest-bg.png`"></image>
    <View class="button-wrap" @click="toNavigation">
      <image class="button-bg" mode="widthFix" :src="`${imgBasePath}tcm/button-bg.png`"></image>
      <View class="button-text">立即开始测试</View>
    </View>
    <View class="mask" v-if="source === -1">
      <View class="share-wrap">
        <image class="share-button-bg" mode="widthFix" :src="`${imgBasePath}newtask/share-button-bg.png`"/>
        <button class="button" open-type="share">点击分享到微信群或微信用户</button>
      </View>
      <image class="share-arrow" mode="widthFix" :src="`${imgBasePath}newtask/share-arrow.png`"/>
    </View>
  </View>
</template>
<script>
import navigationBar from "./components/navigation-bar.vue";
import {v4 as uuidv4} from 'uuid';
import {imgBasePath, trackingHost, stateHost} from "@/common/config";

export default {
  name: "physiqueTest",
  components: {
    navigationBar,
  },
  data() {
    return {
      isLogined: uni.getStorageSync("token"),
      isShow: true,
      recordId: uuidv4(),
      source: null,
      storeId: null,
      invitorCode: '',
      imgBasePath,
    }
  },
  onLoad(params) {
    // -1 店长端
    // 1 福利页
    // 2 用户分享
    // 3 店长分享
    // 4 其他
    const {source, invitorCode, taskId} = params;
    this.source = +source || 4;
    // 分享带过来的invitorCode
    this.invitorCode = invitorCode;
    uni.setStorageSync('taskId', parseInt(taskId));
  },
  onShow() {
    this.isShow = true;
    this.isLogined = uni.getStorageSync("token");
    this.login("impression");
  },
  onShareAppMessage(res) {
    return {
      title: "快！亿万苍生，人分九种，来测测你的中医体质！",
      path: `pages/physiqueTest/index?storeId=${this.storeId}&source=2&invitorCode=${this.invitorCode}`,
      imageUrl: `${imgBasePath}tcm/share-image.png`,
    }
  },
  methods: {
    async login(event) {
      try {
        const code = await this.wxLogin();
        const checkLoginRes = await this.$NoteApi.doRequest("get", "login", {code, requestCode: ''});
        const {code: checkLoginCode, data, message} = checkLoginRes.data;
        if (checkLoginCode == 0) {
          uni.setStorageSync("userInfo", data);
          uni.setStorageSync("token", data.token)
          if (data.isNew == 1) {
            this.isLogined = false;
            this.isShow = true;
            this.tcmMain(event);
          } else {
            this.findCus().then(res => {
              this.tcmMain(event);
            });

            return true;
          }
        } else {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: error,
          icon: 'none'
        })
      }
    },
    wxLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            resolve(loginRes.code)
          },
          fail: (error) => {
            reject(error)
          }
        })
      })
    },

    onBack() {
      if (this.source == 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: '/pages/sindex/index'
        });
      }
    },
    toNavigation() {
      this.login("click").then(res => {
        if (res) {
          uni.navigateTo({
            url: `/pages/physiqueTest/answer?recordId=${this.recordId}&storeId=${this.storeId}&invitorCode=${this.invitorCode}`
          });
        }
      });
    },
    noLogin() {
      this.isShow = false;
    },
    toLogin() {
    },
    findCus() {
      return this.$request("api/red/yzkj/findCus", {method: "GET", host: stateHost})
          .then(res => {
            const {storeId, inviteCode: invitorCode} = res;
            this.storeId = storeId;
            this.invitorCode = invitorCode;
            uni.setStorageSync("storeId", storeId);
            return res;
          }).catch(() => null)
    },
    tcmMain(event) {
      const {unionid, openid} = uni.getStorageSync("userInfo")
      const params = {
        oid: openid,
        uid: unionid,
        sid: this.storeId,
        event,
        page: "tcmMain",
        ts: Date.parse(new Date()) / 1000,
        source: this.source,
        rid: this.recordId,
      }
      this.$request("event-tracking/user", {host: trackingHost, params})
          .catch(() => {
          })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  line-height: 0;

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.50);

    .share-wrap {
      top: 200rpx;
      left: 75rpx;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;

      .share-button-bg {
        width: 430rpx;
      }

      .button {
        padding: 0;
        font-size: 30rpx;
        position: absolute;
        background: none;
        color: #FFFFFF;
        width: 100%;

        &::after {
          border: none;
        }
      }
    }

    .share-arrow {
      position: absolute;
      top: 168rpx;
      right: 145rpx;
      width: 105rpx;
    }
  }

  .page-bg {
    width: 100%;
    min-height: 100vh;
  }

  .button-wrap {
    position: absolute;
    width: calc(100% - 150rpx);
    bottom: 150rpx;
    left: 75rpx;
    animation: 4s shareButton infinite;

    .button-bg {
      width: 100%;
    }

    .button-text {
      position: absolute;
      text-align: center;
      width: 100%;
      font-family: "PingFangSC-Semibold";
      font-size: 48rpx;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 100rpx;
      z-index: 10;
      left: 0;
      top: 0;
    }
  }
}

@keyframes shareButton {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
</style>
